<template>
    <el-row type="flex" justify="center"
        style="align-content: center;height: 100%;margin-top: 2%"><!-- 使用el-row组件，创建一个居中对齐内容，并设置高度和上边距的布局 -->
        <el-form style="width: 80%;" label-width="auto" :size="formSize" status-icon
            :label-position="labelPosition"><!-- 使用el-form组件，设置宽度、标签宽度、尺寸和标签位置 -->
            <el-form-item style="width: 100%;"><!-- 显示身份验证标题 -->
                <el-text style="width: 100%;text-align: start;font-weight: bold;font-size: xx-large;">{{ '身份验证\n'
                    }}</el-text><!-- 显示身份验证 -->
            </el-form-item>
            <el-form-item style="margin-top: 5%;">
                <el-text style="text-align: start;font-weight: normal;font-size: large;">{{ `短信验证码已发送至手机\n${phone}`
                    }}</el-text><!-- 显示验证码已发送至手机 -->
            </el-form-item>
            <el-form-item label="短信验证码" style="margin-top: 10%;">
                <el-input v-model="code" style="width: 100%" type="text" maxlength="6" />
            </el-form-item><!-- 提交按钮 -->
            <el-form-item>
                <el-row style="width: 100%; align-content: center;margin-top: 5%;" justify="center">
                    <el-col :span="14">
                        <el-button style="background-color: #fbaf5a; color: white; width: 100%;height: 40px;"
                            @click="submitForm">立即验证</el-button>
                    </el-col>
                </el-row>
            </el-form-item>
        </el-form>
    </el-row>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { ElMessage, ComponentSize } from 'element-plus';
import type { FormProps } from 'element-plus';
import { UserModel } from '../assets/models/User';
import { useRoute } from 'vue-router';
import { agcApis } from '../assets/apis/AgcApis';
import router from '../router';
import { paymentApis } from '../assets/apis/PaymentApis';

//声明相应变量
const phone = ref<string>();
const id = ref<string>();
const money = ref<number>();
const route = useRoute();
const labelPosition = ref<FormProps['labelPosition']>('top')
const code = ref<string>();
const formSize = ref<ComponentSize>('large');

onMounted(() => {
    // 从路由查询参数中获取手机号、ID和金额，并发送验证码请求
    phone.value = String(route.query.phone);
    id.value = String(route.query.id);
    money.value = Number(route.query.money);
    agcApis.getVerifyCode(phone.value);
})

//调用函数
const submitForm = () => {
     // 调用API通过验证码进行身份验证
    agcApis.authByVerifyCode(phone.value!, code.value!)
        .then((value) => {
            if (value.getUser()) {
                ElMessage.success('身份验证通过');//提示身份验证成功
                // 准备用户数据并调用充值API
                let user: UserModel = {
                    id: id.value,
                    money: money.value
                };
                paymentApis.recharge(user)
                    .then((value: boolean) => {
                        if (value) {//充值成功，跳转页面
                            router.replace('/success');
                        }
                    })
            } else {//身份验证失败，显示失败信息
                ElMessage.error('身份验证失败')
            }
        })
}
</script>


<style scoped>
.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}


.header_register {
    width: 100%;
    height: 90px;
    background-color: #fbaf5a;
    padding: 20px;
}
</style>